<template>
    <el-card>
      <!-- 商品表格 -->
      <el-table :data="productList" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="商品名" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="number" label="库存" />
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="sellerId" label="隶属商家id" />
        <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status == '1'" type="success">正常</el-tag>
              <el-tag v-else type="danger">下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"  @click="update(scope.row.id,scope.row.status)" />
            <el-button type="danger" style="margin-left: 10px;" @click="deleteProduct(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <p>
        <el-pagination layout="prev, pager, next, sizes " :total="1000"
         :current-page="currentPage"
         :page-size="pageSize"
        @current-change="handlePageChange" 
        @size-change="handleSizeChange"
        />
      </p>
    </el-card>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 启用禁用
const value1 = ref(false)
//页面加载时加载所有商品数据
onMounted(() => {
  getAllProduct()
})
//存放商品列表
const productList = ref([])
//分页页数
const currentPage = ref(1)
//页面数据条数
const pageSize = ref(10)
//获取所有商品数据
const getAllProduct = () => {
  //发送请求
  axios.get(BASE_URL+'/v1/product/list?page='+(currentPage.value-1)*10+'&&size='+pageSize.value
+'&&status=-1').then(res => {
        if(res.data.code === 2000){
          console.log(res.data.data)
          productList.value = res.data.data
        }else{
          ElMessage.error(res.data.msg)
        }
  })
}
//修改
const update = (id,status) => {
  axios.post(BASE_URL+'/v1/product/update?id='+id+'&&status='+status).then(res => {
    if(res.data.code === 2000){
        ElMessage.success('修改成功')
        getAllProduct()
    }else{
        ElMessage.error(res.data.msg)
    }
  })
}
//删除
const deleteProduct = (id) => {
  axios.post(BASE_URL+'/v1/product/delete/'+id).then(res => {
    if(res.data.code === 2000){
        ElMessage.success('删除成功')
        getAllProduct()
    }else{
        ElMessage.error(res.data.msg)
    }
  })
}
// 分页事件处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage; // 更新当前页码
  getAllProduct(); // 重新加载数据
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize; // 更新每页条数
  currentPage.value = 1;    // 重置到第一页
  getAllProduct();          // 重新加载数据
};
</script>

<style>

</style>